<!-- +----------------------------------------------------------------------
| 麦沃德科技赋能开发者，助力中小企业发展 
+----------------------------------------------------------------------
| Copyright (c) 2017～2024  www.wdadmin.cn    All rights reserved.
+----------------------------------------------------------------------
| 沃德代驾系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
+----------------------------------------------------------------------
| Author: MY WORLD Team <bd@maiwd.cn>   www.wdadmin.cn
+----------------------------------------------------------------------
| 组件-优惠券列表 开发者: 麦沃德科技-半夏 
+---------------------------------------------------------------------- -->

<template>
	<view class="component-coupon-list" :style="{'--theme-color': themeColor}">
		<view class="list-item flex align-items-center" v-for="(item, index) in showData" :key="index" @click="handleClick(index)">
			<view class="item-amount">￥<text class="text">{{item.discount_price}}</text></view>
			<view class="item-connect">
				<view class="connect-circle"></view>
				<view class="connect-line"></view>
				<view class="connect-circle"></view>
			</view>
			<view class="item-info flex-item">
				<view class="info-title">{{item.name}}</view>
				<view class="info-subtitle">可用于代驾扣除费用</view>
				<view class="info-expiration" v-if="showType == 1">{{item.expire_date}}</view>
			</view>
			<view class="item-btn">
				<block v-if="showType == 1">
					<view class="btn disabled" v-if="item.immediate_use == 2">
						<text>暂不</text>
						<text>可用</text>
					</view>
					<view class="btn" v-else>
						<text>立即</text>
						<text>使用</text>
					</view>
				</block>
				<view class="btn plain" v-else-if="showType == 2 && item.received == 1">
					<text>立即</text>
					<text>使用</text>
				</view>
				<view class="btn" v-else-if="showType == 2">
					<text>立即</text>
					<text>领取</text>
				</view>
			</view>
			<view class="item-mask" v-if="loading">
				<view class="mask-left">
					<view class="left-item"></view>
				</view>
				<view class="mask-right">
					<view class="right-item"></view>
					<view class="right-item"></view>
					<view class="right-item"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState } from "vuex"
	export default {
		name: "componentCouponList",
		props: ["showData", "showType", "loading"],
		computed: {
			...mapState({
				themeColor: state => state.app.themeColor,
			})
		},
		methods: {
			// 改变页面滚动状态
			pageChange(state) {
				this.$emit("onChange", state)
			},
			// 按钮点击
			handleClick(index) {
				const item = this.showData[index]
				if (this.showType == 1 && item.immediate_use == 2) {
					uni.showToast({
						icon: "none",
						title: "未到使用期限，请耐心等待",
						duration: 2000
					})
				} else if (this.showType == 1 || (this.showType == 2 && item.received == 1)) {
					this.$util.toPage({
						mode: 3,
						path: "/pages/passenger/index/index",
					})
				} else {
					uni.showLoading({
						title: "加载中",
						mask: true
					})
					this.$util.request("passenger.coupon.receive", {
						coupon_id: item.id,
					}).then(res => {
						uni.hideLoading()
						if (res.code == 1) {
							uni.showToast({
								icon: "success",
								title: "领取成功"
							})
							this.$emit("changeReceive", item.id)
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					}).catch(error => {
						uni.hideLoading()
						console.error('领取优惠券 ', error)
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	.component-coupon-list {
		.list-item {
			position: relative;
			margin-top: 32rpx;
			border-radius: 32rpx;
			background: #FFF;
			overflow: hidden;
			min-height: 176rpx;

			&:first-child {
				margin-top: 0;
			}

			.item-amount {
				width: 176rpx;
				color: var(--theme-color);
				font-size: 24rpx;
				font-weight: 600;
				line-height: 90rpx;
				padding: 32rpx 0;
				text-align: center;

				.text {
					font-size: 56rpx;
				}
			}

			.item-connect {
				position: relative;
				z-index: 6;
				width: 24rpx;
				align-self: stretch;
				display: flex;
				flex-direction: column;
				align-items: center;

				.connect-circle {
					width: 24rpx;
					height: 12rpx;
					border-radius: 0 0 12rpx 12rpx;
					background: #F6F7F9;

					&:last-child {
						border-radius: 12rpx 12rpx 0 0;
					}
				}

				.connect-line {
					flex: 1;
					border: 1px dashed #EEEFF3;
					margin: 8rpx 0;
				}
			}

			.item-info {
				padding: 32rpx 0;
				margin-left: 24rpx;

				.info-title {
					color: #242629;
					font-size: 28rpx;
					font-weight: 600;
					line-height: 40rpx;
					word-break: break-all;
				}

				.info-subtitle {
					margin-top: 4rpx;
					color: #8D929C;
					font-size: 24rpx;
					line-height: 34rpx;
					word-break: break-all;
				}

				.info-expiration {
					margin-top: 4rpx;
					color: var(--theme-color);
					font-size: 20rpx;
					line-height: 30rpx;
				}
			}

			.item-btn {
				padding: 32rpx 32rpx 32rpx 0;
				margin-left: 16rpx;

				.btn {
					display: flex;
					flex-direction: column;
					color: #FFF;
					text-align: center;
					font-size: 24rpx;
					line-height: 34rpx;
					padding: 14rpx 24rpx;
					border-radius: 24rpx;
					border: 1px solid var(--theme-color);
					background: var(--theme-color);

					&.plain {
						background: transparent;
						color: var(--theme-color);
					}

					&.disabled {
						border-color: #c8c9cc;
						background: #c8c9cc;
					}
				}
			}

			.item-mask {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				z-index: 5;
				background: #FFF;
				display: flex;

				.mask-left {
					width: 176rpx;
					height: 100%;
					display: flex;
					justify-content: center;
					align-items: center;

					.left-item {
						width: 60%;
						height: 64rpx;
						background: #eee;
					}
				}

				.mask-right {
					margin-left: 24rpx;
					flex: 1;
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					row-gap: 8rpx;
					padding: 0 32rpx 0 24rpx;

					.right-item {
						width: 100%;
						height: 32rpx;
						background: #eee;
					}
				}
			}
		}
	}
</style>